"use client";
import UploadObs from "@/app/components/uploadObs/uploadObs";
import Img from "@/app/components/img/img";
import styles from "./page.module.scss";
import NameInput from "@/app/components/NameInput/NameInput";
import { useState } from "react";

const ComponentsPlay = () => {
  const img = {
    src: "/assets/images/！！.jpg",
    alt: "！！",
    width: 500,
    height: 500,
  };
  const usetype: string = "component";
  const [NameInputData, setNameInputData] = useState("");

  return (
    <div className={styles.container}>
      <div className={styles.uploadSection}>
        <UploadObs usetype={usetype} />
      </div>
      <div className={styles.imageSection}>
        <Img
          src={img.src}
          alt={img.alt}
          width={img.width}
          height={img.height}
        />
      </div>
      <div className={styles.nameInput}>
        {NameInputData}
        <NameInput
          buttonText="提交"
          callback={setNameInputData}
          placeholder="请输入名称"
        />
      </div>
    </div>
  );
};

export default ComponentsPlay;
